<template>
  <div class="commerce-elements">
    <div class="elements-header">
      <h4>电商元素</h4>
    </div>

    <div class="categories">
      <el-radio-group v-model="selectedCategory" size="small">
        <el-radio-button v-for="category in categories" :key="category.value" :label="category.value">
          {{ category.label }}
        </el-radio-button>
      </el-radio-group>
    </div>

    <div class="element-search">
      <el-input placeholder="搜索元素" v-model="searchQuery" size="small" clearable prefix-icon="el-icon-search" />
    </div>

    <div class="elements-container">
      <div class="element-section" v-for="section in filteredSections" :key="section.name">
        <h5 class="section-title">{{ section.title }}</h5>
        <div class="element-grid">
          <div
            v-for="element in section.elements"
            :key="element.id"
            class="element-item"
            @click="addElement(element)"
          >
            <div class="element-thumbnail">
              <img :src="element.thumbnail" :alt="element.name" />
            </div>
            <div class="element-name">{{ element.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const emit = defineEmits(['add-element']);

// 分类
const selectedCategory = ref('all');
const categories = [
  { label: '全部', value: 'all' },
  { label: '价格', value: 'price' },
  { label: '标签', value: 'tag' },
  { label: '按钮', value: 'button' },
  { label: '装饰', value: 'decoration' }
];

// 搜索
const searchQuery = ref('');

// 元素数据
const elementSections = computed(() => [
  {
    name: 'price',
    title: '价格元素',
    elements: [
      { id: 'p1', name: '促销价', thumbnail: '/images/commerce/elements/price1.png', type: 'price' },
      { id: 'p2', name: '折扣价', thumbnail: '/images/commerce/elements/price2.png', type: 'price' },
      { id: 'p3', name: '秒杀价', thumbnail: '/images/commerce/elements/price3.png', type: 'price' },
      { id: 'p4', name: '划线价对比', thumbnail: '/images/commerce/elements/price4.png', type: 'price' }
    ]
  },
  {
    name: 'tag',
    title: '标签元素',
    elements: [
      { id: 't1', name: '热销标签', thumbnail: '/images/commerce/elements/tag1.png', type: 'tag' },
      { id: 't2', name: '新品标签', thumbnail: '/images/commerce/elements/tag2.png', type: 'tag' },
      { id: 't3', name: '限时标签', thumbnail: '/images/commerce/elements/tag3.png', type: 'tag' },
      { id: 't4', name: '折扣标签', thumbnail: '/images/commerce/elements/tag4.png', type: 'tag' }
    ]
  },
  {
    name: 'button',
    title: '按钮元素',
    elements: [
      { id: 'b1', name: '立即购买', thumbnail: '/images/commerce/elements/button1.png', type: 'button' },
      { id: 'b2', name: '加入购物车', thumbnail: '/images/commerce/elements/button2.png', type: 'button' },
      { id: 'b3', name: '领券按钮', thumbnail: '/images/commerce/elements/button3.png', type: 'button' },
      { id: 'b4', name: '立即抢购', thumbnail: '/images/commerce/elements/button4.png', type: 'button' }
    ]
  },
  {
    name: 'decoration',
    title: '装饰元素',
    elements: [
      { id: 'd1', name: '活动标题框', thumbnail: '/images/commerce/elements/deco1.png', type: 'decoration' },
      { id: 'd2', name: '分隔线', thumbnail: '/images/commerce/elements/deco2.png', type: 'decoration' },
      { id: 'd3', name: '倒计时框', thumbnail: '/images/commerce/elements/deco3.png', type: 'decoration' },
      { id: 'd4', name: '优惠券底框', thumbnail: '/images/commerce/elements/deco4.png', type: 'decoration' }
    ]
  }
]);

// 根据筛选条件过滤元素
const filteredSections = computed(() => {
  return elementSections.value.map(section => {
    const filteredElements = section.elements.filter(element => {
      // 类别筛选
      const categoryMatch = selectedCategory.value === 'all' || element.type === selectedCategory.value;
      
      // 搜索筛选
      const searchMatch = !searchQuery.value || 
        element.name.toLowerCase().includes(searchQuery.value.toLowerCase());
      
      return categoryMatch && searchMatch;
    });
    
    return {
      ...section,
      elements: filteredElements
    };
  }).filter(section => section.elements.length > 0);
});

// 添加元素到画布
function addElement(element) {
  emit('add-element', element);
}
</script>

<style scoped>
.commerce-elements {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.elements-header {
  margin-bottom: 15px;
}

.elements-header h4 {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

.categories {
  margin-bottom: 15px;
  overflow-x: auto;
  white-space: nowrap;
}

.element-search {
  margin-bottom: 15px;
}

.elements-container {
  flex: 1;
  overflow-y: auto;
}

.element-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 13px;
  color: #606266;
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}

.element-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.element-item {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  transition: all 0.3s;
  background-color: #fff;
}

.element-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #c6e2ff;
}

.element-thumbnail {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
}

.element-thumbnail img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.element-name {
  padding: 5px;
  font-size: 12px;
  text-align: center;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>